/*
 * 推荐商品部分商品组件
 * @Author: ljb
 * @Date: 2018-11-13 16:32:49
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-30 15:16:42
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	.v-component-recommend-product {
		display: inline-block;
		height: 220*@rem-per-px;
		.product-container {
			width: 160*@rem-per-px;
			text-align: center;
			vertical-align: top;
			.product-image {
				width: 160*@rem-per-px;
				height: 160*@rem-per-px;
				line-height: 160*@rem-per-px;
				overflow: hidden;
				font-size: 0;
				background-color: @background-color;
				img {
					width: 100%;
					vertical-align: middle;
				}
			}
			.price-area {
				.product-price {
					line-height: 32*@rem-per-px;
					font-size: 24*@rem-per-px;
					font-weight: bold;
				}
				.line-price {
					line-height: 28*@rem-per-px;
					font-size: 20*@rem-per-px;
					text-decoration: line-through;
					color: rgba(0,0,0,.45);
				}
				.unit {
					// color: @unit-color;
				}
			}
		}
	}

</style>
<template>
	<div class="v-component-recommend-product">
		<div class="product-container">
			<div class="product-image">
				<img
					v-lazy="productImage"
					alt="">
			</div>
			<div class="price-area">
				<div class="product-price">
					<span
						v-if="leftSymbol"
						class="unit">{{ leftSymbol }}</span>
					{{ productPrice }}
					<span
						v-if="rightSymbol"
						class="unit">{{ rightSymbol }}</span>
				</div>
				<div
					v-if="linePrice"
					class="line-price">{{ leftSymbol + linePrice + rightSymbol }}</div>
			</div>
		</div>
	</div>
</template>

<script>
/**
 * 推荐商品部分商品组件
 * @vue-prop {string} [productImage=null]	封面图片
 * @vue-prop {String} [productTitle='']	商品标题
 * @vue-prop {String | Number} [productPrice=''] 商品价格
 * @vue-prop {String | Number} linePrice 划线价
 * @vue-prop {string} [leftSymbol=''] 货币符号
 * @vue-prop {string} [rightSymbol='] 货币符号
 */
export default {
	name: 'RecommendProduct',
	props: {
		productImage: {
			type: String,
			default() {
				return null;
			},
		},
		productTitle: {
			type: String,
			default() {
				return '';
			},
		},
		productPrice: {
			type: [String, Number],
			required: true,
		},
		linePrice: {
			type: [String, Number],
			required: true,
		},
		leftSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		rightSymbol: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {
		};
	},
	methods: {
	},
};
</script>
